<script setup lang="ts">
import { ref } from 'vue'
import type { QuestionParams, QuestionList } from '@/types/data'
import { getArticleList } from '@/api/article'
import ArticleItem from './component/article_item.vue'
const loading = ref(false)
const finished = ref(false)
const list = ref<QuestionList>({
  current: 1,
  pageTotal: 10,
  pageSize: 10,
  total: 0,
  rows: []
})
// 声明数据  发请求需要传入的参数
const quertParams = ref<QuestionParams>({
  current: 1,
  pageSize: 10,
  stem: '',
  keyWord: '',
  sorter: 'weight_desc'
})
// 发送请求 获取列表
const getlist = async () => {
  quertParams.value.current = 1
  const res = await getArticleList(quertParams.value)
  console.log(res)
  // 判断是否到左后一页了
  if (res.data.rows.length === 0) {
    finished.value = true
    return
  }
  // list.value = data
  list.value.rows.push(...res.data.rows)
  loading.value = false
  quertParams.value.current++
}
const changeSorter = (type: '' | 'weight_desc') => {
  quertParams.value.sorter = type
  list.value.rows = [] // 先清空数据 否则就会持续加载
  quertParams.value.current = 1
  loading.value = true
  finished.value = false
  getlist() // 重新加载数据
}
const onload = () => {
  getlist()
}
</script>

<template>
  <nav class="my-nav van-hairline--bottom">
    <a
      :class="{ active: quertParams.sorter === 'weight_desc' }"
      href="javascript:;"
      @click="changeSorter('weight_desc')"
      >推荐</a
    >
    <a :class="{ active: quertParams.sorter === '' }" href="javascript:;" @click="changeSorter('')"
      >最新</a
    >
    <div class="logo"><img src="@/assets/logo.png" alt="" /></div>
  </nav>
  <!-- <van-list> 试题列表 </van-list> -->
  <van-pull-refresh style="margin: 50px 0">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onload"
    >
      <article-item v-for="item in list.rows" :key="item.id" :item="item"></article-item>
    </van-list>
  </van-pull-refresh>
</template>
<style lang="less" scoped>
.my-nav {
  height: 44px;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 999;
  background: #fff;
  display: flex;
  align-items: center;

  > a {
    color: #999;
    font-size: 14px;
    line-height: 44px;
    margin-left: 20px;
    position: relative;
    transition: all 0.3s;

    &::after {
      content: '';
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0;
      width: 0;
      height: 2px;
      background: #222;
      transition: all 0.3s;
    }

    &.active {
      color: #222;

      &::after {
        width: 14px;
      }
    }
  }

  .logo {
    flex: 1;
    display: flex;
    justify-content: flex-end;

    > img {
      width: 64px;
      height: 28px;
      display: block;
      margin-right: 10px;
    }
  }
}
</style>
